<template>
  <div class="base-echart">
    <div class="echart" ref="echartRef"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted, watchEffect } from 'vue'
import type { EChartsOption } from 'echarts'
// 注册地图
import ChinaJson from '../data/china.json'
// any类型都可赋值，都可转成any类型
echarts.registerMap('china', ChinaJson as any)
// 传入的配置
interface IProps {
  option: EChartsOption
}
const props = defineProps<IProps>()
const echartRef = ref<HTMLElement>()
onMounted(() => {
  // 1初始化echarts
  const echartInstance = echarts.init(echartRef.value!, 'light', {
    renderer: 'canvas'
  })
  // 2监听option的变化，重新执行
  watchEffect(() => echartInstance.setOption(props.option))
  //3,监听window缩放
  window.addEventListener('resize', () => {
    echartInstance.resize()
  })
})
</script>

<style lang="less" scoped>
.base-echart {
  color: red;
}
.echart {
  height: 300px;
}
</style>
